<template>
  <div>
    <van-icon class="trigger" v-show="!show" name="arrow-up" @click="show = true" />
    <van-overlay :show="show" @click="show = false">
      <van-grid :column-num="10" square>
          <van-grid-item
            :class="[current==index?'now':'',type?(item.nowAnswers?(item.nowAnswers==item.answers?'green':'red'):''):'']"
            v-for="(item,index) in list"
            :key="index"
            :text="index+1+''"
          />
      </van-grid>
    </van-overlay>
  </div>
</template>

<script>
export default {
  props: ["total"],
  data() {
    return {
      show: false
    };
  },
  computed: {
    list() {
      return this.$store.state.exam.list;
    },
    current() {
      return this.$store.state.exam.current;
    },
    type() {
      let flage;
      flage = this.$store.state.exam.type == "study" ? true : false;
      return flage;
    }
  }
};
</script>

<style scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-grid {
  position: absolute;
  bottom:0;
  width:100%;
}
.trigger {
  position: absolute;
  bottom: 10px;
  left: 185px;
}
.now >>> .van-grid-item__content {
  background-color: #409eff !important;
}
.now >>> .van-grid-item__text {
  color: white;
}
.green >>> .van-grid-item__text {
  color: white;
}
.red >>> .van-grid-item__text {
  color: white;
}
.green >>> .van-grid-item__content {
  background: green;
}

.red >>> .van-grid-item__content {
  background: red;
}
.tubiao {
  text-align: center;
  margin: 0 auto;
}
</style>